<template>
  <div style="padding: 20px; max-width: 600px; margin: 0 auto;">
    <h1>🧠 七牛云AI角色扮演测试页面</h1>
    <p>这是一个最简化的测试页面，用于验证前后端是否能正常通信</p>

    <div style="margin: 20px 0;">
      <div style="margin-bottom: 10px;">
        <label>角色：</label>
        <input
            v-model="currentRole"
            placeholder="例如：苏格拉底"
            style="padding: 8px; width: 200px; margin-left: 10px;"
        />
      </div>

      <div style="margin-bottom: 10px;">
        <label>消息：</label>
        <input
            v-model="userMessage"
            placeholder="输入你想说的话..."
            @keyup.enter="sendMessage"
            style="padding: 8px; width: 300px; margin-left: 10px;"
        />
      </div>

      <button
          @click="sendMessage"
          :disabled="!userMessage"
          style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px;"
      >
        发送测试
      </button>
    </div>

    <div v-if="loading" style="color: #666;">正在发送请求...</div>

    <div v-if="reply" style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px;">
      <h3>后端回复：</h3>
      <p>{{ reply }}</p>
    </div>

    <div v-if="error" style="margin-top: 20px; padding: 15px; background: #ffe6e6; border-radius: 4px; color: red;">
      <h3>错误信息：</h3>
      <p>{{ error }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      currentRole: '苏格拉底',
      userMessage: '',
      reply: '',
      loading: false,
      error: ''
    }
  },
  methods: {
    async sendMessage() {
      if (!this.userMessage.trim()) return;

      this.loading = true;
      this.error = '';
      this.reply = '';

      try {
        const response = await axios.post('http://localhost:8080/api/chat', {
          role: this.currentRole,
          message: this.userMessage
        });

        this.reply = response.data.reply;
        this.userMessage = '';

      } catch (error) {
        console.error('请求失败:', error);
        this.error = `请求失败: ${error.message}`;

        if (error.response) {
          this.error += ` (状态码: ${error.response.status})`;
        }
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>